<html>
  <head>
    <style>
      a{
        text-decoration: none;
        color: #304455
      }
      .docs {
        padding-top: 61px;
      }
      body {
        font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
        font-size: 1rem;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #304455;
        background-color: #fff;
        margin: 0;
      }
      /* 网页和header共用的container 大屏留白 */
      /* .container{
        padding:0;
        height:100%;
        box-sizing: border-box;
        width:1140px;
        margin: 0 auto;
      } */
      /* 最外层的header包裹 */
      body.docs #header {
        position: fixed;
        width: 100%;
        top: 0;
      }
      #header {
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
        transition: background-color 0.3s ease-in-out;
      }
      #header {
        background-color: #fff;
        height: 40px;
        padding: 10px 60px;
        position: relative;
        z-index: 20;
      }
      /* 图像a标签 */
      #logo {
        display: inline-block;
        line-height: 40px;
        font-size: 1.5em;
        font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
        font-weight: 500;
        color:black;
      }
      /* 图像本身 */
      #logo img{
        vertical-align: middle;
        margin-right: 6px;
        width:40px;
        height:40px;
      }
      /* nav：内侧导航栏 包裹 */
      body.docs #nav {
        position: fixed;
      }

      #nav {
        list-style-type: none;
        margin: 0;
        padding: 0;
        position: absolute;
        right:30px;
        top: 10px;
        height: 40px;
        line-height: 40px;
      }

      /* 导航栏内的每个单项 */
      #nav li {
        display: inline-block;
        position: relative;
        margin: 0 0.6em
      }

      /* 导航栏的搜索框 */
      .search-query{
        height:30px;
        line-height: 30px;
        box-sizing: border-box;
        padding: 0 15px 0 30px;
        border: 1px solid #e3e3e3;
        color: #273849;
        outline:none;
        border-radius: 15px;
        margin-right: 10px;
        transition: border-color 0.2s ease;
        background: #fff url(https://cn.vuejs.org/images/search.png) 8px 5px no-repeat;
        background-size: 20px;
        vertical-align: middle !important;
      }

      /* 导航栏的下拉菜单 */
      #nav .nav-dropdown-container{
        padding-right: 0.8em;
      }

      /* 导航栏每一个选项的细节样式 */
      #nav .nav-link{
        cursor: pointer;
      }
      .nav-link:hover{
        border-bottom:3px solid #42b983
      }
      .nav-link.current{
        color: #358a63
      }
      .nav-link{
        padding-bottom: 3px;
        white-space: nowrap;
      }

      /* 导航栏内的三角▶下箭头的css实现 */
      #nav .nav-dropdown-container .arrow{
        pointer-events: none;
      }
      #nav .arrow {
          display: inline-block;
          vertical-align: middle;
          margin-top: -1px;
          margin-left: 6px;
          margin-right: -14px;
          width: 0;
          height: 0;
          border-left: 4px solid transparent;
          border-right: 4px solid transparent;
          border-top: 5px solid #4f5959;
      }
    </style>
  </head>
  <body class="docs">
    <header id="header">
      <div class="container">
        <a id="logo" href="http://www.bupt.edu.cn">
          <img src="https://cn.vuejs.org/images/logo.png">
          <span>Vue.js</span>
        </a>
        <ul id="nav">
          <li>
            <form id="search-form">
              <input
              type="text"
              class="search-query st-default-search-input aa-input"
              aria-label="搜索"
              autocomplete="off"
              spellcheck="false"
              role="combobox"
              aria-autocomplete="list"
              aria-expanded="false"
              aria-owns="algolia-autocomplete-listbox-0">
            </form>
          </li>
          <li class="nav-dropdown-container learn">
            <a class="nav-link current">分支D的修改1</a>
            <span class="arrow"></span>
          </li>
          <li class="nav-dropdown-container ecosystem">
            <a class="nav-link">分支D的修改2</a>
            <span class="arrow"></span>
          </li>
          <li>
            <a class="nav-link">分支D的修改3</a>
          </li>
        </ul>
      </div>
    </header>
  </body>
</html>
